<!--
	作者：2575202388@qq.com
	时间：2018-10-14
	描述：基础设置顶部
-->

<template>
	<div>
		<div style="padding-top:10px;">
			<Form ref="params"  :label-width="150" label-position="right">		
				<div style="width:100%;height: 120px;float:left;text-align: left;">
				    <FormItem label="首页轮播图片">
					    <Upload
					        ref="upload1"
					        :show-upload-list="false"
					        :on-success="handleSuccess"
					        :format="['jpg','jpeg','png']"
					        :max-size="2048"
					        :on-format-error="handleFormatError"
					        :on-exceeded-size="handleMaxSize" 
					        type="drag"
					        :action="action"
					        style="display: inline-block;width:80px;">
					        <div style="width: 80px;height:80px;line-height: 80px;">
					            <Icon type="ios-camera" size="20"></Icon>
					        </div>
					    </Upload>
				    </FormItem>
				</div>
				
				<div style="float:left;width:100%;">
		    		<FormItem label="图片上传说明:">
						<label>图片大小不能大于2M，宽高比例为：1:2.5为最佳</label>
		    		</FormItem>
			    </div>
				
		    	<div style="float:left;width:100%;padding-left:150px;">
		    		<template v-for="(item,index) of photos1">
		    			<div style="width: 120px;height:auto;margin-right:10px;float:left;">
		    				<div style="width: 120px;height:auto;float:left;">
		    					<img style="width:120px;height: auto;" :src="item" @click="handleView(item)">
		    				</div>
				            <div style="text-align:center;float:left;width: 120px;">
				                <Icon style="font-size: 20px;" type="ios-trash-outline" @click.native="handleRemove(index)"></Icon>
				            </div>
		    			</div>
		            </template>
			    </div>
						    
				
				<Modal title="图片预览" v-model="visible">
			        <img :src="imgurl" v-if="visible" style="width: 100%">
			    </Modal>
		
			</Form>	
		</div>
		<div style="width:100%;height: 60px;line-height: 60px;float:left;margin-bottom: 20px;">
			<Button type="info" style="float:left;margin-left:10%;" v-on:click="save()">保存</Button>
		</div>	
	</div>
</template>
<script>
	import _config from "../../../../config/config"
	export default {
		name:"home",
		data() {			
			return {
				visible: false,
				imgurl:'',
				photos: [],
				photos1: [],
				action:_config._ADMIN_SERVER+"/readbook/upload/filesUploadBookfm.html"
			}
		},
		components: {
			
		},
		methods: {
			handleView (item) {
				this.imgurl=item;
                this.visible = true;
            },
            handleRemove (index) {
              	this.photos.splice(index, 1);
              	this.photos1.splice(index, 1);
            },
            
            handleSuccess(res, file) {
                var photos=this.photos;
				var photos1=this.photos1;
                var imgurl=res[0].FILE_PATH;
                var imgurl1=_config._ADMIN_SERVER+"/readbook/"+res[0].FILE_PATH;
                photos.push(imgurl);
                photos1.push(imgurl1);
                this.photos=photos;
                this.photos1=photos1;
            },
          
            
            handleFormatError (file) {
                this.$Notice.warning({
                    title: '文件上传失败',
                    desc: '文件' + file.name + '无法上传, 上传文件请选择jpg or png.'
                });
            },
            handleMaxSize (file) {
                this.$Notice.warning({
                    title: '提示',
                    desc: '文件  ' + file.name + ' 太大, 上传的文件不能超过2M.'
                });
            },
            
            
            getimageset(){
            	this.$http.get("/host/readbook/jfych/getlunboPic.html")
				.then(datas => {
					var photos=[];
					var photos1=[];
					for(var i=0;i<datas.length;i++){
						photos.push(datas[i].PICURL);
						photos1.push(_config._ADMIN_SERVER+"/readbook/"+datas[i].PICURL);
					}
					this.photos=photos;
                	this.photos1=photos1;
				});	
           },
            
            
            
            save(){
				var photos=this.photos;
				const params={
					photos:JSON.stringify(photos),
				}
				this.$http.post("/host/readbook/jfych/insertLunboPic.html",params)
				.then(datas => {
					if(datas){
						this.$Modal.success({
                            title: "提示",
                            content: "保存成功"
                        });	
					}else{
						this.$Modal.error({
                            title: "提示",
                            content:"保存失败"
                        });	
					}
				});
			}
            
            
		},
		mounted(){	
			//获取图片信息
			this.getimageset();
		},
		watch:{
			
		},
		computed: {
			user: function() {
				return this.$store.state.app.user;
			}
		},
	}
</script>

<style>
</style>



